<!-- 【后台注册】弹窗页面 -->
<template>
  <div class="body">
    <el-dialog class="register-dialog" :title="dialog.title" :close-on-click-modal="false" center style="margin-top: 150px;" width="600px" :visible.sync="dialog.open">
      <el-form style="margin-left: 50px" :model="sysUser" ref="registerForm" :rules="rules" label-width="100px">
        <el-form-item label="用户姓名" prop="userName">
          <el-input v-model="sysUser.userName" placeholder="请输入用户姓名" :disabled="dialog.disabled" class="sui-input"></el-input>
        </el-form-item>
        <el-form-item label="登录账号" prop="loginName">
          <el-input v-model="sysUser.loginName" placeholder="请输入登录账号" :disabled="dialog.disabled" class="sui-input"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="sysUser.password" type="password" placeholder="请输入登录密码" :disabled="dialog.disabled" class="sui-input"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="prePassword">
          <el-input v-model="sysUser.prePassword" type="password" placeholder="请输入确认密码" :disabled="dialog.disabled" class="sui-input"></el-input>
        </el-form-item>
        <el-form-item label="用户角色" v-if="showRoles" prop="roleList">
          <el-radio-group v-model="sysUser.roleList[0]">
            <el-radio v-for="role in allRole" style="margin-right: 25px" size="mini" :key="role.roleCode" :label="role">{{role.roleName}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel">取 消</el-button>
        <el-button size="small" v-if="!dialog.disabled" type="primary" @click="submitRegister('registerForm')">提交注册</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    name: "registerForm",
    data() {
      return {
        //弹窗设置
        dialog: {
          title: "",
          open: false,
          disabled: false
        },
        //表单数据
        sysUser: {
          photo: "",
          loginName: "",
          prePassword:"",
          password: "",
          roleList:[],
        },
        //表单校验
        rules: {
          photo: [{required: true, message: '请上传用户头像', trigger: 'blur'}],
          loginName: [{required: true, message: '请输入登录账号', trigger: 'blur'}],
          userName: [{required: true, message: '请输入用户姓名', trigger: 'blur'}],
          password: [{required: true, message: '请输入登录密码', trigger: 'blur'}],
          prePassword: [{required: true, message: '请输入确认密码', trigger: 'blur'}],
          roleList: [{required: true,type:"array", message: '请选择用户角色', trigger: 'blur'}],
        }
      }
    },
    computed:{
      allRole(){
        return this.$store.getters.config.allRole.filter(function (v) {
          return v.roleCode !='adminRole';
        });
      },
      showRoles(){
        return this.$store.getters.config.showRoles;
      }
    },
    methods: {
      //打开弹窗
      open(option) {
        this.showDialog(option.title, false);
        //设置默认角色
        this.sysUser.roleList=[{roleCode:'userRole'}];
      },
      //取消弹窗
      cancel: function () {
        this.dialog.open = false
      },
      //提交表单
      submitRegister: function (formName) {
        const that = this;
        that.$refs[formName].validate((valid) => {
          if (valid) {//表达校验
            if (that.sysUser.password != that.sysUser.prePassword) {
              this.showWarn("两次密码不一致!")
              return false
            }
            that.$request.doPost('/admin/login/register', that.sysUser).then(res => {
              if (res.isOk) {
                that.dialog.open = false;
                that.showSuccess("注册成功");
                that.$emit('reloadList');
              }
            });
          }
        });
      },
      //显示弹窗
      showDialog(title, disabled) {
        this.resetForm(this.$refs.registerForm);//重置表单
        this.dialog.open = true;//打开弹窗
        this.dialog.title = title;//设置标题
        this.dialog.disabled = disabled;//是否可编辑
      },
    }
  }
</script>

<style scoped lang="scss">
  @import '../../../../assets/styles/theme';
  .register-dialog /deep/ .el-dialog__headerbtn .el-dialog__close{
    color: white!important;
  }
  .register-dialog /deep/ .el-dialog__header  {
    background: #409EFF;
  }
  .register-dialog /deep/ .el-dialog__title  {
    font-weight: bold;
    color: white!important;
  }
</style>
